/*  reset */
@import './variables';
//  生成对应颜色的文字颜色喝背景颜色
@each $colorKey,$color in $colors{
    .text-#{$colorKey}{
        color: $color;
    }
    .bg-#{$colorKey}{
        background-color: $color;
    }
}
// text位置
@each $var in (left,center,right){
    .text-#{$var}{
        text-align: $var !important;
    }
}

// 遍历每一个字体大小
@each $sizeKey,$size in $font-size{
    .fs-#{$sizeKey}{
        font-size:$size * $base-font-size
    }
}

// text-overflow
.text-ellipsis{
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

//flex
@each $key,$value in $flex-jc {
    .jc-#{$key}{
        justify-content:$value
    }
}

// align-item
@each $key,$value in $flex-ai{
    .ai-#{$key}{
        align-items: $value;
    }
}



// 常用边距margin、padding定义
@each $typeKey,$type in $spacing-types {
    // .m-1 不带方位的形式
        @each $sizeKey,$size in $spacing-sizes {
            // .m-1 {margin:0.25rem}
            .#{$typeKey}-#{$sizeKey}{ 
                #{$type}:$size*$spacing-base-size
            }
            // .mx-1 水平左右保持一致 .my-1 垂直上下保持一致
              // .mx-1 {margin:0.25rem}
              .#{$typeKey}x-#{$sizeKey}{ 
                #{$type}-left:$size*$spacing-base-size;
                #{$type}-right:$size*$spacing-base-size;
            }
            // .my-1 {margin:0.25rem}   
            .#{$typeKey}y-#{$sizeKey}{ 
                #{$type}-top:$size*$spacing-base-size;
                #{$type}-bottom:$size*$spacing-base-size;
            }
            // .mt-1 {margin-top:0.25rem}
            @each $directionKey,$direction in $spacing-directions{
            .#{$typeKey}#{$directionKey}-#{$sizeKey}{ 
                #{$type}-#{$direction}:$size*$spacing-base-size
                }
            }
            
        }
} 

// boder
@each $dir in (top,right,bottom,left) {
    .border-#{$dir}{
        border-#{dir}:1px solid $border-color
    }    
}











